<template>
    <div class="content" v-if="confirmInfo">
        <router-link class="address-info" tag="div" :to='`/address_select/${$route.query.goods_id}`'>
            <p><span>{{confirmInfo.receiver}}</span><span>{{confirmInfo.phone}}</span></p>
            <p>{{confirmInfo.address}}</p>
        </router-link>
        <div class="goods-info">
            <div class="goods-cover-box">
                <img :src="confirmInfo.goods_banner" :alt="confirmInfo.goods_name">
            </div>
            <div class="goods-description-box">
                <h5>{{confirmInfo.goods_name}}</h5>
                <p><span>兑换积分：<span class="credits">{{confirmInfo.goods_scores}}分</span></span><span class="origin-price">￥{{confirmInfo.goods_price}}</span><span class="shipping">{{parseFloat(confirmInfo.freight)? '运费：'+confirmInfo.freight : '免运费'}}</span></p>
            </div>
        </div>
        <div class="count-info">
            <div class="quantity-box">
                兑换数量：{{quantity}}
                <div class="quantity-wrap">
                    <button class="decrease" :disabled="quantity==1" @click="changeQuantity(-1)">-</button>
                    <span>{{quantity}}</span>
                    <button class="increase" :disabled="overScore" @click="changeQuantity(1)">+</button>
                </div>
            </div>
            <div class="count-box">
                <span>共计{{quantity}}件商品</span>
                <span class="payment-info">需支付：{{quantity * confirmInfo.goods_scores}}积分</span>
            </div>
        </div>
        <div class="button-box">
            <button class="exchange" @click="checkHasPwd">确认兑换</button>
        </div>
    </div>
</template>
<script>
import { MessageBox,Toast,Indicator } from "mint-ui"
import { apiPost } from "src/common/api.js";

export default {
  name: "check-order",
  data() {
    return {
        confirmInfo:null,
        quantity:1,
        errorCount:0
    };
  },
  computed:{
      overScore(){
          return parseFloat((this.quantity+1)*this.confirmInfo.goods_scores) > parseFloat(this.confirmInfo.user_scores)
      }
  },
  mounted() {
      if(!this.$route.query.goods_id){
          this.$route.go(-1)
      }
      this.getConfirmInfo()
  },
  methods: {
      changeQuantity(num) {
        this.quantity += num
      },
      checkHasPwd() {
        apiPost('paystatus',{}).then((res)=>{
            if(res.status === 0){
                if(res.data.recode === 0){
                    MessageBox.alert('请先设置支付密码再进行提现操作', '提示').then(() => {
                        this.$router.push('/payment_set')
                    })
                }else if(res.data.recode === 1){
                    MessageBox.prompt('请输入支付密码',{inputType:'password',inputPlaceholder:'请输入6位数字支付密码'})
                    .then(({ value, action }) => { 
                        this.checkPwd(value)
                    })
                    .catch(() => {

                    })                 
                }
            }else{
                console.log(res.msg)
            }
        })
      },
      checkPwd(pwd){
          apiPost('check_paypwd',{passwd:pwd}).then((res)=>{
              if(res.status === 0){
                  this.checkOrder(pwd)
              }else{
                  this.errorCount ++
                  if(this.errorCount<3){
                    Toast({
                        message: '支付密码错误，请重新输入',
                        position: 'bottom',
                        duration: 1500
                    })
                  }else if(this.errorCount>=3){
                      MessageBox.confirm('密码错误次数已达到3次，是否忘记了您的密码，前往重置？').then(action => {
                          this.$router.push('/reset_pwd')
                      })
                  }
              }
          })
      },
      checkOrder(pwd) {
          let pwdReg = /^\d{6}$/
          if(!pwdReg.test(pwd)){
               Toast({
                message: '支付密码为6位数字，请重新输入',
                position: 'bottom',
                duration: 1500
                })
                return false
          }else if(!this.confirmInfo.goods_id){
              Toast({
                message: '无法获取商品id，请重试',
                position: 'bottom',
                duration: 1500
                })
                return false
          }else if(!this.confirmInfo.address_id){
              Toast({
                message: '无法获取用户地址，请重试',
                position: 'bottom',
                duration: 1500
                })
                return false
          }else{
              this.submitOrder(pwd)
          }
      },
      submitOrder(pwd) {
        let params = {
            goods_id: this.confirmInfo.goods_id,
            amount: this.quantity,
            address_id: this.confirmInfo.address_id,
            passwd: pwd
        }
        apiPost('confirm_order',params).then((res)=>{
            if(res.status === 0){
                this.$router.push({path: `/order_result/${res.data.order_id}`})
            }else{
                console.log(res.msg)
            }
        })
      },
      getConfirmInfo() {
        let params = this.$route.query
        apiPost('confirm_order_info',params).then((res)=>{
            if(res.status === 0) {
                if(!res.data.address_id){
                    this.$router.go(-1)
                }
                this.confirmInfo = res.data
            }else {
                console.log(res.msg);
            }
        })
      }
  }
};
</script>
<style lang="scss" scoped>
.address-info {
  margin-bottom: 10px;
  padding: 15px;
  background: #fff;
  border-bottom: 1px solid #d2d2d2;
  p {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.goods-info {
  .goods-cover-box {
    img {
      width: 100%;
      height: 73.33vw;
      object-fit: cover;
    }
  }
  .goods-description-box {
    padding: 10px 15px;
    background: #fff;
    h5 {
      font-size: 15px;
      font-weight: 400;
    }
    p {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      .credits {
        color: #ff5a5a;
      }
      .origin-price {
        text-decoration: line-through;
      }
    }
  }
}
.count-info{
    padding:0 15px 10px;
    background: #fff;
    border-bottom:1px solid #d2d2d2;
    .quantity-box{
        display: flex;
        justify-content: space-between;
        padding-top: 5px;
        border-top:1px solid #d2d2d2;
        font-size: 15px;
        button{
            width: 16px;
            height: 16px;
            line-height: 16px;
            font-size: 16px;
            color: #333;
        }
        button:disabled{
            color: #abadae;
        }
    }
    .count-box{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        .payment-info{
            color: #ff5a5a;
        }
    }
}
.button-box {
    padding: 15px 20px 25px;
    button{
      display: inline-block;
      width: 100%;
      height: 45px;
      line-height: 45px;
      text-align: center;
      border: none;
      outline: none;
      font-size: 16px;
      color: #fff;
      background: #78d041;
    }
    button:disabled{
      color: #333;
      background: #999;
      pointer-events: none;
    }
  }
</style>


